<template>
	<view class="container">
		<!-- 商品轮播图 -->
		<view class="product_image">
			<swiper :indicator-dots="true" indicator-active-color="#EA4350" :autoplay="true">
				<swiper-item  @click="previewImage(index)" v-for="(item, index) in product.pics" :key="index">
					<image mode="widthFix" :src="item.pics_big || '/static/empty.png'"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 价格和分享 -->
		<view class="price_container">
			<view class="price">¥{{product.goods_price}}</view>
			<view class="share_fav_container">
				<!-- 注意：如果需要调用微信开放功能，必须使用button -->
				<button class="iconfont icon-zhuanfa" open-type="share"></button>
				<view @click="fav" class="fav iconfont expand " :class="isFav ? 'icon-shoucang': 'icon-shoucang1'"></view>
			</view>
		</view>
		<!-- 商品标题 -->
		<view class="product_title">{{product.goods_name}}</view>
		<view class="detail_container">
			<view class="title">图文详情</view>
			<rich-text :nodes="product.goods_introduce"></rich-text>
		</view>
		<!-- 加入购物车操作栏 -->
		<view class="action_container">
			<!-- 联系客服 -->
			<view class="concat_container">
				<!-- 客服icon -->
				<button open-type="contact" class="iconfont icon-kefu"></button>
				<view class="text">联系客服</view>
			</view>
			<!-- 购物车 -->
			<view class="cart_container" @click="goToCart">
				<view class="iconfont icon-gouwuche"></view>
				<view class="text">购物车</view>
			</view>
			<!-- 加入购物车按钮 -->
			<view class="add_cart" @click="addToCart">加入购物车</view>
			<!-- 立即购买 -->
			<view class="buy_now" @click="buyNow">立即购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				product: {},
				isFav: false, // 判断商品是否已经收藏
			};
		},
		async onLoad(options) {
			this.getProductDetail(options.id)
			// 判断商品是否已经收藏
			const [error, res] = await uni.getStorage({
				key: 'product_fav'
			})
			if (res) {
				const index = res.data.findIndex(item => {
					return item == options.id
				})
				// 已经收藏状态
				if (index !== -1) {
					this.isFav = true
				}
			}
		},
		methods: {
			async getProductDetail(id) {
				// 请求数据
				const [error, res] = await uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/detail',
					data: { goods_id: id }
				})
				this.product = res.data.message;
			},
			// 预览图片
			previewImage(index) {
				// 准备数据
				const urls = this.product.pics.map(item => {
					return item.pics_big;
				})
				uni.previewImage({
					current: index,
					urls: urls // urls必须是一个数组，数组里面放图片路径
				})
			},
			// 通过该方法设置分享的标题，跳转地址，或者图片
			onShareAppMessage() {
				return {
					// 分享标题
					title: '黑马56期黑马优购项目',
					// 用户打开点击分享内容是跳转的页面
					path: '/pages/index/index'
				}
			},
			// 收藏商品
			async fav() {
				// 先从本地存储取回原来的数据
				const [error, res] = await uni.getStorage({
					key: 'product_fav'
				})
				// 获取初始的收藏数据
				let favList = [];
				if (res) {
					favList = res.data;
				}
				
				// 判断是加入收藏还是取消收藏
				// 判断原数组中是否存在当前商品id，如果存在，删除，否则，增加
				const index = favList.findIndex(item => {
					return item === this.product.goods_id;
				})
				// 找到了元素
				if (index !== -1) {
					favList.splice(index, 1);
					this.isFav = false;
				} else {
					favList.push(this.product.goods_id)
					this.isFav = true;
				}
				
				// 把收藏商品存储到本地
				await uni.setStorage({
					key: 'product_fav',
					data: favList,
				})
			},
			goToCart() {
				uni.switchTab({
					url: '/pages/cart/index'
				})
			},
			// 加入购物车功能
			async addToCart() {
				// 1、先从本地存储取回原来的数据
				const [error, res] = await uni.getStorage({
					key: 'cart'
				})
				let cart = [];
				if (res) {
					cart = res.data;
				}
				// 2、判断购物车是否存在当前商品，如果存在把数量加一，如果不存在，直接把商品对象push进数组
				const product = cart.find(item => {
					return item.goods_id === this.product.goods_id;
				})
				if (product) {
					product.amount++;
				} else {
					// 设置购买数量，第一次加入，默认的数量为1
					this.product.amount = 1;
					cart.push(this.product)
				}
				uni.showToast({
					icon: 'none',
					title: '加入购物车成功'
				})
				// 3、把数据存到本地存储
				return uni.setStorage({
					key: 'cart',
					data: cart
				})
			},
			// 立即购买
			buyNow() {
				// 因为数据存储是异步的，需要等待存储完毕再跳转到购物车，否则会导致购物车数量没法获取到最新
				this.addToCart().then(() => {
					this.goToCart();
				});
			}
		}
	}
</script>

<style lang="less">
	.container {
		// 清除button默认样式
		button {
			padding: 0;
			line-height: 1;
			background: none;
		}
		button:after {
			border:0;
		}
		.product_image {
			height: 497rpx;
			swiper {
				height: 100%;
				swiper-item {
					display: flex;
					justify-content: center;
					image {
						width: 497rpx;
					}
				}
			}
		}
		.price_container {
			display: flex;
			justify-content: space-between;
			padding: 19rpx 34rpx;
			.price {
				font-size: 34rpx;
				color: #EA4350;

			}
			.share_fav_container {
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 40rpx;
				}
				.fav {
					margin-left: 46rpx;
					color: #FCAA23;
				}
			}
		}
		.product_title {
			font-size: 30rpx;
			color: #434343;
			font-weight: bold;
			padding: 0 34rpx;
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			margin-bottom: 48rpx;
		}
		.detail_container {
			 border-top: 19rpx solid #f5f5f5;
			.title {
				font-size: 28rpx;
				color:#434343;
				font-weight: bold;
				text-align: center;
				margin: 19rpx 0;
			}
		}
		.action_container {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding-left: 50rpx;
			background: #fff;
			border-top: 1rpx solid #DEDEDE;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 94rpx;
			.concat_container,.cart_container {
				font-size: 20rpx;
				color: #434343;
				display: flex;
				flex-direction: column;
				align-items: center;
				.iconfont {
					font-size: 34rpx;
					margin-bottom: 10rpx;
				}
			}
			.add_cart,.buy_now {
				background: #FCAA23;
				border-radius: 30rpx;
				color: #fff;
				font-size: 26rpx;
				width: 196rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.buy_now {
				background: #EA4350;
			}
		}
	}
</style>
